<template>
	<view class="page">
		<view class="fictionwrap" v-if="ReadContent">
			<view class="fcontent"  :style="{fontSize: `${fontSize}rem`}" :class="skinValue"
			 v-html="ReadContent"></view>
		</view>
		<uni-loading status="loading" v-else></uni-loading>
		<!-- 屏幕居中点击层 -->
	    <view class="clickview" @tap="showopview">
		</view>  
	<!-- 底部弹出层 打开目录和设置 -->
	<uni-popup ref="opbottom" type="bottom">
		<view class="op-footer" :class="skinValue">
			<view class="foot-wrap" @tap="openclist">
				<img src="../../static/img/icon/mulu.png" class="img" alt="">
				<view class="foot-text">目录</view>
			</view>
			<view class="foot-wrap" @tap="skinCheckbox(4,'night')">
				<img src="../../static/img/icon/night.png" class="img" alt="">
				<view class="foot-text">夜间</view>
			</view>
			<!-- <view class="foot-wrap" @tap="openclist">
				<img src="../../static/img/icon/son.png" class="img" alt="">
				<view class="foot-text">亮度</view>
			</view> -->
			<view class="foot-wrap" @tap="opensetting">
				<img src="../../static/img/icon/set.png" class="img" alt="">
				<view class="foot-text">设置</view>
			</view>
		</view>
	</uni-popup>
	<!-- 目录层 -->
	<uni-drawer ref="clistdrawer" mode="left">
		<view class="chapterwrap">
			<view class="zjmu">章节目录</view>
			<view class="totalnum"> 共{{clist.length}}章</view>
			<view class="zhengwj">正文卷</view>
			<scroll-view scroll-y="true" :style="{'height':windowHeight}" :scroll-into-view="viewId">
				<view class="clistwrap" v-for="(item,index) in clist " :key="index" @tap="details(item)">
					<view :id="'cid'+item.indexNum" class="listitem" :class="item.indexNum == indexNum?'text-orange':''">{{item.indexName}}</view>
				</view>
			</scroll-view>
		</view>
	</uni-drawer>
	<!-- 字体大小和颜色层 -->
	<uni-popup ref="fontandcolor" type="bottom" >
		 <view class="fcwrap">
		 	 <view class="fontwrap">
		 		<slider :value="fontSizeSlider" activeColor="#f37b1d" backgroundColor="#464646" block-color="#f37b1d" block-size="22"
		 		  min="1" max="8" @change="fontSizeChange" @changing="fontSizeChange" />
		 		 
		 	 </view>
		 	 <view class="colorwrap">
		 		 <view class="coloritem"  v-for="(s,index) in skinData" :key="index">
		 			<button class="chcekbutton" :class="s.key" v-if="s.checked">
		 				<fa-icon type="check" color="#f37b1d" size="22"></fa-icon>
		 			</button>
		 			<button class="chcekbutton" @tap="skinCheckbox(index,s.key)" :class="s.key" v-else></button> 
		 		 </view>
		 	 </view>
		 </view>
	</uni-popup>
	
	</view>

</template>

<script>
	 //抽屉 与 弹出层
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniDrawer,
			uniPopup
		},
		data() {
			return {
				indexNum :0,
				clistIndex: 0,
				fictionid:'',
				cachekey:'',
				viewId:'',
				clickid:undefined,
				clist: [],
				windowHeight:0,
				fontSize: 1,
				fontSizeSlider: 2,
				skinData: [
				{ key: 'default',checked: true,color:'#E6E0CF' }, 
				{ key: 'blue', checked: false,color:'#cad9e8' },
				{ key: 'green', checked: false,color:'#d1edd1' }, 
				{ key: 'light', checked: false,color:'#e6e6e6' },
				{ key: 'night', checked: false,color:'#1a1a1a' }
			    ],
				skinValue: 'default',
				layoutData: [],
				loadnext:false,
				ReadContent: '',
				addBtn: false,
			}
		},
		onLoad(e) {
			//章节目录的高度动态获取
			var me = this;
			uni.getSystemInfo({
				success(res) {
					me.windowHeight = (res.windowHeight-126) + "px";
				}
			}); 
			uni.setNavigationBarTitle({
				title:e.title
			});
			let chapter_url = e.chapter_url;
			let indexurl = e.indexurl;
		    me.fictionid = e.fictionid;
			me.bookIndexId = e.bookIndexId;
		    //获取现在是第几个元素正在被显示
			me.indexNum = e.indexNum;
			me.viewId = 'cid'+me.indexNum;
			this.getChapterContent(me.fictionid,me.bookIndexId);
			this.getBookChapter(me.fictionid);
		 
		 //uni.removeStorageSync("cachebookchapter");
		},
		//上拉加载下一章
		onReachBottom() {
			//为了有一个良好的体验，当页面加载至末尾的时候，手动拼接上下一章的内容。
			var me = this;
			let tempContent = me.ReadContent;
			if(this.loadnext) return;
			this.loadnext = true;
			//setTimeout(()=>{ this.loadnext = false; }, 3000);//3秒钟之内上拉只加载一次
			 
			if(me.clistIndex+2 >= me.clist.length){
				me.ReadContent += "<p style='text-align:center;'>---最新章节待更新---</p>";
				return;
			}else{
				me.ReadContent += "<p style='text-align:center;'>---正在加载新的章节---</p>";
			}
			let indexNum = me.indexNum;
			me.clistIndex = me.clist.map(item => item.indexNum).indexOf(indexNum);
			
			let cinfo = me.clist[me.clistIndex+1];
		
			me.indexNum = cinfo.indexNum;
			me.viewId ="cid"+me.indexNum; // 切换成下一个的ID
			console.log("被缓存的章节===="+me.indexNum);
			// uni.showToast({
			// 	title:"被缓存的章节===="+me.indexNum
			// });
			var bookObj = {};
			bookObj.bookId = me.fictionid;
			bookObj.bookIndexId = cinfo.id;
			bookObj.indexNum = me.indexNum;
			bookObj.title = cinfo.indexName;
			me.cachebookcp(bookObj);//缓存正在看的章节
			let ctitle =  cinfo.indexName;
			
			uni.setNavigationBarTitle({
				title: ctitle
			});
			let url = me.websiteUrl + '/book/content/book/'+me.fictionid+'/'+cinfo.id;
			me.webhttp(url,{}).then(res => {
				if (res.code == 200) {
					this.loadnext = false; // 成功之后才能加载下一章。。要不然多次请求乱了
					let ctitlehtml = "<h5 style='text-align:center'>"+ctitle+"</h5>";
					me.ReadContent = tempContent+ ctitlehtml + res.data.content;
				}
			});
		},
		methods: {
			//缓存当前读书的章节  点目录的不管只缓存下滑的
			cachebookcp(bookObj){
				var me =this;
				var cachemap = uni.getStorageSync("cachebookchapter");
				if(cachemap == "" || cachemap == null || cachemap==undefined){
					cachemap=[];
					let cachebook = {key:me.fictionid,value:bookObj};
					cachemap.push(cachebook);
				}
				if(cachemap.length>0){
					let exist =false;
					for(let i=0; i<cachemap.length;i++){
						//console.log(cachemap[i].key == me.indexurl);
						if(cachemap[i].key == me.fictionid){
							cachemap[i].value=bookObj;
							exist = true;
							break;
						}
					}
					if(!exist){
						let cachebook = {key:me.fictionid,value:bookObj};
						cachemap.push(cachebook);
					}
				} 
				console.log(cachemap);
				uni.setStorageSync("cachebookchapter",cachemap);
				//console.log(uni.getStorageSync("cachebookchapter"));
			},
			getChapterContent(bookId,bookIndexId) {
				var me = this;
				var url = me.websiteUrl + '/book/content/book/'+bookId+'/'+bookIndexId;
				me.webhttp(url,{bookId}).then(res => {
					if (res.code == 200) {
						me.ReadContent = res.data.content;
					}
				});

			},
			 
			getBookChapter(bookId){
				var me = this;
				var url = me.websiteUrl + '/book/content/book/indexList-'+bookId;
				
				me.webhttp(url,{bookId}).then(res=>{
					if(res.code == 200){
						me.clist = res.data;
					}
				});
			},
			//点击目录显示书籍详情
			details(item) {
				 
				var me = this;
				//me.changeurl();
			 
				//同个列表多次点击只算一次点击
				if(!me.clickid){
					me.clickid = item.id;
				}else if(me.clickid == item.id){
					return;
				}
				me.clickid = item.id; 
				me.indexNum = item.indexNum;
				 
				let ctitle = item.indexName;
				uni.setNavigationBarTitle({
					title:ctitle
				});
			 
				me.ReadContent = ''; //清空重新加载
				//如果已经有滚动，需要清空滚动
				uni.pageScrollTo({
					scrollTop:0
				});
				me.viewId="cid"+item.indexNum;
				
				me.getChapterContent(item.bookId,item.id);
				//this.getNewReadContent();
			},
			//动态改变url
			changeurl(){
				var me = this;
				var url = window.location.href;
				var valiable = url.split("?")[0];
				
				var param = '?fictionid='+me.cinfo.fictionId+'&bookIndexId='+me.cinfo.id;
				window.history.pushState({},0,valiable+param);
			},
			getNewReadContent() {
				var me = this;
				let bookIndexId = me.cinfo.bookIndexId;
				///取数组的下一个元素赋值给当前的cinfo
				me.cinfo = me.clist[me.clist.length -1];

				uni.setNavigationBarTitle({
					title: me.cinfo.indexName
				});
				me.viewId="cid"+me.cinfo.bookIndexId;
				me.getChapterContent(this.bookId,me.cinfo.bookIndexId);

			},
			 
			 //打开目录
			 openclist(){
			 	this.$refs.opbottom.close();
			 	this.$refs.clistdrawer.open();
			 },
			 //打开设置
			 opensetting(){
			 	this.$refs.opbottom.close();
			 	this.$refs.fontandcolor.open();
			 },
			 //打开底部的操作菜单
			 showopview(){
			 	this.$refs.opbottom.open();
			 },
			  
			fontSizeMove() {
				let Size = this.fontSizeSlider;
				if (Size > 1) {
					let num = Size - 1;
					this.fontSizeSlider = num;
					this.SetFontSize(num);
				}
			},
			fontSizeAdd() {
				let Size = this.fontSizeSlider;
				if (Size < 8) {
					let num = Size + 1;
					this.fontSizeSlider = num;
					this.SetFontSize(num);
				}
			},
			fontSizeChange(e) {
				let num = e.detail.value;
				this.SetFontSize(num);
			},
			SetFontSize(num) {
				if (num == 1) {
					this.fontSize = 0.875;
				} else if (num == 2) {
					this.fontSize = 1;
				} else if (num == 3) {
					this.fontSize = 1.125;
				} else if (num == 4) {
					this.fontSize = 1.25;
				} else if (num == 5) {
					this.fontSize = 1.375;
				} else if (num == 6) {
					this.fontSize = 1.5;
				} else if (num == 7) {
					this.fontSize = 1.625;
				} else if (num == 8) {
					this.fontSize = 1.75;
				}
			},
			skinCheckbox(index, key) {
				let items = this.skinData;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					this.skinData[i].checked = false;
				}
				this.skinData[index].checked = true;
				this.skinValue = key;
				if(index==0){
					uni.setNavigationBarColor({ frontColor: "#000000", backgroundColor: "#E6E0CF" })
				}else if(index==1){
					uni.setNavigationBarColor({ frontColor: "#000000", backgroundColor: "#cad9e8" })
				}else if(index==2){
					uni.setNavigationBarColor({ frontColor: "#000000", backgroundColor: "#d1edd1" })
				}else if(index==3){
					uni.setNavigationBarColor({ frontColor: "#000000", backgroundColor: "#e6e6e6" })
				}else if(index==4){
					uni.setNavigationBarColor({ frontColor: "#ffffff", backgroundColor: "#1a1a1a" })
				}
			},
			layoutCheckbox(index, key) {
				let items = this.layoutData;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					this.layoutData[i].checked = false;
				}
				this.layoutData[index].checked = true;
				this.layoutValue = key;
			}
			 
		}
	}
</script>

<style scoped lang="scss">
/* 底部弹出层 start */
.op-footer {
	background-color: #E6E0CF;
	display: flex;
	flex-direction: row;
	color: #F7F7F7;
	padding: 22rpx 50rpx;
	.img{
		width: 64rpx;
		height: 64rpx;
	}
}

.foot-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 50%;
	justify-content: center;
	align-items: center;
}

.foot-text {
	font-size: 24rpx;
	color: #666;
}

/* 底部弹出层 end */
/* 左侧弹出目录 start*/
.chapterwrap {
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	height: 100%;
}

.zjmu {
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	color: #f37b1d;
	border-bottom: #f37b1d solid 1px;
}

.totalnum {
	height: 20px;
	padding: 10px 15px;
	font-size: 14px;
}

.zhengwj {
	height: 20px;
	padding: 10px 15px;
	font-size: 12px;
	background-color: #F7F7F7;
	color: #C0C0C0;
}

.clistwrap {
	display: flex;
	flex-direction: column;
}

.listitem {
	font-size: 16px;
	padding: 15px;
	border-bottom: #E3E3E3 solid 1px;
}

/* 左侧弹出目录 end*/

/* 阅读层 start*/
.fictionwrap {
	height: 100%;
	width: 100%;
	min-height: 1000px;
	 
	position: absolute;
	background: url(../../static/img/skin-default-t.jpg) no-repeat center top,
		url(../../static/img/skin-default-b.jpg) no-repeat center bottom,
		url(../../static/img/skin-default-m.jpg) repeat-y center 217rpx;
	/* background-size: 100%; */
	color: #000;
}

.text-orange{
	color:#f37b1d;
}

.fcontent {
	padding:10px;
	min-height: 1000px;
	min-width: 710upx;
	line-height: 20px;
	position: absolute;
	line-height: 1.8;
	text-align: justify;
	background: #E6E0CF;
}

.clickview {
	background: rgba(255, 204, 51, 0);
	/* 点击区域设置背景透明*/
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width: 300px;
	height: 300px;
	z-index: 10;
}

.fcwrap {
	display: flex;
	flex-direction: column;
	background-color: #333333;
}

.fontwrap {
	padding: 10px 0px;
}

.colorwrap {
	border-top: #eacf93 solid 1px;
	display: flex;
	flex-direction: row;
	padding-top: 10px;
}

.chcekbutton {
	width: 130upx;
	height: 60upx;
	display: inline-block;
	line-height: 60upx;
}
.coloritem{
	padding: 20upx 10upx;
}
.blue {
	background: #cad9e8;
}

.green {
	background: #d1edd1;
}

.light {
	background: #e6e6e6;

}

.night {
	color: #CAD9E8;
	background: #1a1a1a;
}

/* 阅读层 end*/

</style>
